<template>
  <div>
    <div class="chemical">
      <div class="add" @click="edit()">新增记录</div>
      <van-search
        class="info_search"
        v-model="value"
        @search="onSearch"
        @clear="clearSearch"
        placeholder="搜索"
      />

      <van-list
        style="margin-top: 10px; padding: 10px"
        :finished="finished"
        v-model="loading"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(item, index) in list" :key="index" class="mb-10">
          <div class="chemical_item">
            <div>
              <div class="ch_header">
                <div>证书名称：{{ item.CertName }}</div>
              </div>
              <van-row class="ch_row">
                <van-col span="24" class="ch_col">
                  <img src="@/assets/Images/AppIcon/icon_number.png" alt="" />
                  <div>编号：{{ item.UserCertCode || "无" }}</div>
                </van-col>
              </van-row>
              <van-row class="ch_row">
                <van-col span="24" class="ch_col">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                    alt=""
                  />
                  <div>员工：{{ item.ChnName || "无" }}</div>
                </van-col>
              </van-row>
              <van-row class="ch_row">
                <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
                <div>最近复审日期：{{ item.ReviewDate || "无" }}</div>
              </van-row>
              <van-row class="ch_row">
                <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
                <div>下次复审日期：{{ item.NextReviewDate || "无" }}</div>
              </van-row>
            </div>
            <van-divider />
            <div class="dep_btm">
              <div class="btm_item" @click="edit(item)">
                <img src="@/assets/Images/AppIcon/icon_list_edit.png" alt="" />
                <div class="mr-10">编辑</div>
              </div>
              <div class="btm_item" @click="handleDelete(item)">
                <img src="@/assets/Images/AppIcon/icon_list_edit.png" alt="" />
                <div class="mr-10">删除</div>
              </div>
            </div>
          </div>
        </van-cell>
      </van-list>
    </div>
    <van-dialog
      v-model="show"
      :title="title"
      @confirm="handleConfirm()"
      show-cancel-button
    >
      <van-form @submit="onSubmit">
        <van-field
          readonly
          clickable
          class="input_text"
          name="ReviewDate"
          :value="form.ReviewDate"
          label="最近检验日期"
          placeholder="点击选择日期"
          @click="handleShow('ReviewDate')"
        />
        <van-field
          readonly
          clickable
          class="input_text"
          name="NextReviewDate "
          :value="form.NextReviewDate"
          label="下次检验日期"
          placeholder="点击选择日期"
          @click="handleShow('NextReviewDate')"
        />
      </van-form>
    </van-dialog>
    <van-calendar
      color="#1989fa"
      v-model="showCalendar"
      :min-date="new Date('2000-01-01')"
      :max-date="new Date('2040-01-01')"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import { getReviewList, editReview, reViewDelete,initDate } from "@/api/cert";
import { formatDate, getDate, getTime } from "@/utils/getDate";
import { Dialog } from "vant";
export default {
  data() {
    return {
      show: false,
      showCalendar: false,
      loading: false,
      finished: false,
      value: "",
      list: [],
      form: {},
      filter: {
        page: 0,
        dataType: "List",
        ucCode: this.$route.query.ucCode,
      },
      title: "新增检查历史",
    };
  },
  created() {
    if (this.$route.query.ucCode) {
      this.getList();
    }
  },
  methods: {
    onSearch() {
      var conditions = [];
      if (this.value) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }
      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions);
      this.getList();
    },
    clearSearch() {
      this.filter = {
        page: 0,
        dataType: "List",
        ucCode: this.$route.query.ucCode,
        conditions: [],
      };
      this.value = "";
      this.getList();
    },
    onConfirm(date) {
      const dateTime = formatDate(date);

      if (this.selectKey == "ReviewDate") {
        var nextDate = new Date(date);
        nextDate.setFullYear(nextDate.getFullYear() + 1);
        this.form.NextReviewDate = getDate(nextDate);
      }
      this.form[this.selectKey] = getDate(dateTime);
      this.showCalendar = false;
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    getList() {
      this.loading = true;
      getReviewList(this.filter).then((res) => {
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        res.data.Data.filter((item) => {
          item.ReviewDate = getDate(item.ReviewDate);
          item.NextReviewDate = getDate(item.NextReviewDate);
        });

        this.list = res.data.Data;
        console.log(this.list, "res.data.Data");

        this.filter.page = res.data.PageIndex;
      });
    },
    onLoad() {
      this.loading = true;
      ++this.filter.page;
      getReviewList(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        res.data.Data.filter((item) => {
          item.ReviewDate = getDate(item.ReviewDate);
          item.NextReviewDate = getDate(item.NextReviewDate);
        });
        this.list = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },
    handleShow(name) {
      this.showCalendar = true;
      this.selectKey = name;
    },
    handleConfirm() {
      this.form.UCCode = this.$route.query.ucCode;
      editReview(this.form).then((res) => {
        this.$toast.success("编辑成功！");
        this.getList();
        // console.log('asdasdsad',res);
      });
    },
    // 详情
    goDetail(ChemCode) {
      this.$router.push({
        path: "/Chemical/Detail",
        query: { ChemCode: ChemCode },
      });
    },
    edit(obj) {
      if (obj) {
        this.form.ID = obj.ID;
        this.form.ReviewDate = obj.ReviewDate;
        this.form.NextReviewDate = obj.NextReviewDate;
        this.title = "编辑检查历史";
      } else {
        this.form = {};
        this.title = "新增检查历史";
        			initDate({ ucCode: this.$route.query.ucCode })
					.then((res) => {
						this.form.ReviewDate = getDate(res.data.ReviewDate) 
						this.form.NextReviewDate = getDate(res.data.NextReviewDate) 
						this.show = true
					})
					.catch((err) => {
						console.log('err', err)
					})
      }
    },
    handleDelete(item) {
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该条复检记录吗?",
      })
        .then(() => {
          // on confirm
          reViewDelete({ id: item.ID }).then((res) => {
            this.$toast.success("删除成功！");
            this.getList();
            // console.log('asdasdsad',res);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less">
.chemical {
  background-color: #e8f1f8;
  min-height: 100vh;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;

    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.chemical_item {
  background-color: #ffffff;
  border-radius: 5px;
  position: relative;
}

.ch_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
}

.ch_row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
  .ch_col {
    display: flex;
    align-items: center;
  }
}

.dep_btm {
  display: flex;
  justify-content: flex-end;

  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
</style>
